<!DOCTYPE html>
<html lang="en">
<head>
    <title>H5请假列表</title>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="Cache-Control" content="no-store, must-revalidate">
    <meta http-equiv="expires" content="Wed, 26 Feb 1997 08:21:57 GMT">
    <meta http-equiv="expires" content="-1">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
          name="viewport">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="shortcut icon" href="/dist/img/icon.png" type="image/x-icon">
    <!--字体-->
    <link href="/dist/css/oa-app.css" rel="stylesheet"/>
    <style>
        table{
            border:none;
        }
        .oa-table td, .oa-table th{
            border:none;
        }
        .oa-table td, .oa-table th {
            height: 30px;
            line-height: 30px;
        }
        .oa-table td{
            border-bottom: 1px solid rgb(238, 238, 238);
        }
        .noData {
            padding-top: 60px;
            font-size: 16px;
            color: #ddd;
            text-align: center;
        }
    </style>
</head>
<body>
<section class="content" id="app" v-cloak style="padding-bottom: 50px;">
    <table class="oa-table " style="position: fixed;top: 0;">
        <thead>
        <tr style="    height: 45px;line-height: 45px;">
            <th style="width:35px;">序日</th>
            <th style="width: 50px">申请人</th>
            <th style="text-align: center">请假时间</th>
            <th style="width: 100px">状态</th>
            <th style="width: 50px">操作</th>
        </tr>
        </thead>
    </table>
    <table class="oa-table" style="margin-top: 45px;">
        <tbody>
        <tr v-for="(item,i) in list">
            <td style="width:35px;">{{i+1}}</td>
            <td style="width: 50px"><div class="oa-name">{{item.userName}}</div></td>
            <td  style="text-align: center" >{{item.leaveTitle}}</td>
            <td style="width: 100px" >
                <span v-if="item.auditFlag==='2'||item.auditFlag==='-2'" style="color:red;">已驳回</span>
                <span v-else-if="item.auditFlag==='1'" class="oaColor">已通过</span>
                <span v-else  style="color:red;">待-{{item.currentAuditorName}}-审核</span>
            </td>
            <td style="width: 50px" class="oaColor" v-if="item.auditFlag==='-1'&&userId==item.currentAuditorId" @click="goDetail(item.id)">
                审核
            </td>
            <td style="width: 50px" class="oaColor" v-else @click="goDetail(item.id)">查看</td>
        </tr>

        </tbody>

    </table>
    <div class="noData" v-if="!list||list.length==0">暂无请假信息
    </div>
    <template v-if="showBtn">
        <div class="oa-footer-btn" v-if="isQj" @click="xiaoJIa">销假</div>
        <div class="oa-footer-btn" v-else @click="goLeaveApp">请假</div>
    </template>
</section>
<script src="https://file.ggxqce.com/web/axios.min.js"></script>
<script src="/dist/js/newOaApp.js"></script>
<script type="text/javascript" src="/dist/plugins/vue/vue.js"></script>
<script type="text/javascript">
    var app = new Vue({
        el: "#app",
        data: {
            userId: getUrlParamObj().userId,
            list:[],
            isQj:false,
            today: new Date().Format("yyyy-MM-dd"),
            showBtn:true
        },
        methods: {
            setScrollTop: function (isScrollTop) {
                var param = {
                    isScrollTop: isScrollTop
                }
                JSBridge.call(UI, 'setScrollTop', param)
            },
            showMore: function (event) {
                var el = event
                var text = el.innerText;
                if (text != "") {
                    text = "<i></i>" + text;
                    var mydiv = document.getElementById("oa-more");
                    if (!mydiv) {
                        var div = document.createElement("div");
                        div.setAttribute("id", "oa-more");
                        document.body.appendChild(div);
                        mydiv = document.getElementById("oa-more");
                    }
                    if(mydiv.offsetParent === null){
                        mydiv.style.display = 'block';
                        mydiv.innerHTML = text;
                        mydiv.style.width = el.offsetWidth + 'px';
                        mydiv.style.left = el.getBoundingClientRect().left + 'px';
                        console.log(el.height)
                        var scrollTop = document.body.scrollTop || document.documentElement.scrollTop || 0;
                        mydiv.style.top = ( scrollTop+el.getBoundingClientRect().top + el.offsetHeight + "px")
                    }else{
                        mydiv.style.display = 'none';
                    }

                }else{
                    var mydiv = document.getElementById("oa-more");
                    mydiv.style.display = 'none';
                }

                document.onclick = function () {
                    var mydiv = document.getElementById("oa-more");
                    if (mydiv) {
                        mydiv.style.display = "none";
                    }
                };
            },
            formatDate: function (now) {
                if (now) {
                    return new Date(now).Format(TimeFormat.middle)
                }
            },
            getList:function () {
                var _this=this;
                axios.post('/signIn/getLeaveList.json', {userId:_this.userId})
                    .then(function (r) {
                        console.log(r);
                        for(var i=0;i<r.length;i++){
                            var data=r[i];
                            if(data.createUserId==_this.userId&&data.auditFlag=='-1'){
                                _this.showBtn=false;
                            }
                            if(data.beginTime==data.endTime){
                                var date=new Date(data.leaveDate).Format("M")+"月"+new Date(data.leaveDate).Format("dd")+"日";
                                data.leaveTitle=date
                            }else{
                                data.leaveTitle=new Date(data.beginTime).Format("M")+"月"+new Date(data.beginTime).Format("dd")+"日"+" 至 "+new Date(data.endTime).Format("M")+"月"+new Date(data.endTime).Format("dd")+"日"
                            }
                        }
                       _this.list=r;
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
            },
            xiaojia:function () {
                var that=this;

                JSBridge.call(UI, 'showLoading', {})
                axios.post('/signIn/delLeaveByDay.json', {userId:that.userId,leaveDate:that.today})
                    .then(function (data) {
                        JSBridge.call(UI, 'hideLoading')
                        JSBridge.call(UI, 'showToast', {title: "销假成功"})
                        window.location.reload()
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
            },
            getLeaveByDay: function () {
                //获取当天请假信息
                var that = this;
                that.go=true;
                JSBridge.call(UI, 'showLoading', {})
                axios.post('/signIn/getLeaveByDay.json', {userId:that.userId,leaveDate:that.today})
                    .then(function (data) {
                        console.log(data)
                        JSBridge.call(UI, 'hideLoading')
                        if(data){
                            that.isQj=true
                        }else{
                            that.isQj=false
                        }
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
            },
            goLeaveApp:function (mainId) {
                var param = {
                    screenType: '0',        //默认竖屏0, 横屏1
                    title: '请假详情',         //顶部标题
                    url: '/page/leave/leaveApp.html?userId='+this.userId+"&dateTime="+this.today, //路径
                    showTitleBar: false,     //是否显示标题栏
                    enableRefresh: false,   //是否启用下拉刷新
                    backRefresh: true       //是否返回刷新
                }
                JSBridge.call(ROUTER, 'navigateTo', param)
            },
            goDetail:function (mainId) {
                var param = {
                    screenType: '0',        //默认竖屏0, 横屏1
                    title: '请假详情',         //顶部标题
                    url: '/page/leave/leaveAuditApp.html?userId='+this.userId+"&mainId="+mainId, //路径
                    showTitleBar: false,     //是否显示标题栏
                    enableRefresh: false,   //是否启用下拉刷新
                    backRefresh: true       //是否返回刷新
                }
                JSBridge.call(ROUTER, 'navigateTo', param)
            }
        },
        mounted: function () {

            //开启下拉刷新
            var param = {
                pullRefresh: true, //是否开启原生下拉刷新
            }
            JSBridge.call(UI, 'setPullRefresh', param)
            var that = this;
            that.getLeaveByDay();
            that.getList();
        }
    })
</script>
<script>
    var isTop = true
    window.onscroll= function(){
        //为了保证兼容性，这里取两个值，哪个有值取哪一个,scrollTop就是触发滚轮事件时滚轮的高度
        var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
        if (scrollTop === 0) {
            isTop = true
            app.setScrollTop(true) //到达顶部
        } else if (scrollTop > 0 && isTop) {
            isTop = false
            app.setScrollTop(false) //非顶部
        }
    }
</script>
</body>
</html>